import React, { useCallback, useContext, useMemo } from 'react';
import classes from './index.module.css';
import calssnames from 'classnames';
import { AppContext } from '@/store/index.context';

export default function MessageHint() {
  const { messageStore } = useContext(AppContext);

  const classNames = useMemo(() => {
    return calssnames({
      [classes.MessageHint]: true,
      animate__animated: true,
      animate__slideInDown: messageStore.showMessage,
      animate__slideOutUp: messageStore.startHide,
    });
  }, [messageStore]);

  const hanldeEnd = useCallback(() => {
    if (messageStore.startHide) {
      messageStore.setStartHide(false);
      messageStore.setShowMessage(false);
    }
  }, [messageStore]);

  return (
    <div className={classNames} onAnimationEnd={hanldeEnd}>
      {messageStore.message}
    </div>
  );
}
